У меня такая проблема, после перезагрузки страницы возникает ошибка. "Функция рендеринга или шаблон не определены в компоненте: анонимный". Я думаю, что ошибка связана с socket.io.
Что означает эта ошибка не на локальном компьютере, а на производстве. dev версия ошибка
server.js
const APP_ENV = require('./.env.js')
const { Nuxt, Builder } = require('nuxt')
const app = require('express')()
let server = require('http').Server(app)
if(APP_ENV.ssl) {
const fs = require('fs')
const options = {
key: fs.readFileSync(APP_ENV.ssl_key),
cert: fs.readFileSync(APP_ENV.ssl_cert)
}
server = require('https').Server(options, app)
}
const port = process.env.PORT || APP_ENV.ws_port
const isProd = process.env.NODE_ENV === 'production'
// We instantiate Nuxt.js with the options
let config = require('./nuxt.config.js')
config.dev = !isProd
const nuxt = new Nuxt(config)
// Start build process in dev mode
if (config.dev) {
const builder = new Builder(nuxt)
builder.build()
}
app.use(nuxt.render)
if (APP_ENV.socket) {
const io = require('socket.io')(server)
const Redis = require('ioredis')
const redis = new Redis(APP_ENV.redis.port, APP_ENV.redis.host)
redis.psubscribe(['*'])
redis.on('pmessage', function (subscribe, channel, message) {
message = JSON.parse(message)
console.log('Server: ', subscribe, channel, message.data.message)
io.emit(channel + ':' + message.event, message.data)
})
// io.on('connection', function (socket) {
// })
}
server.listen(port, function () {
console.log('Listening on Port ' + port)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
плагины / socket.io.js
ю / index.js
module.exports = function () {
const APP_ENV = require('../.env.js')
const server = require('http').createServer(this.nuxt.renderer.app)
// overwrite nuxt.listen()
this.nuxt.listen = (port, host) => new Promise((resolve) => server.listen(port || 3000, host || 'localhost', resolve))
// close this server on 'close' event
this.nuxt.hook('close', () => new Promise((resolve) => server.close(resolve)))
// Add `socket.io-client` in vendor
this.addVendor('socket.io-client')
if (APP_ENV.socket) {
const io = require('socket.io')(server)
const Redis = require('ioredis')
const redis = new Redis(APP_ENV.redis.port, APP_ENV.redis.host)
redis.psubscribe(['*'])
redis.on('pmessage', function (subscribe, channel, message) {
message = JSON.parse(message)
console.log('Server: ', subscribe, channel, message.data.message)
io.emit(channel + ':' + message.event, message.data)
})
// io.on('connection', function (socket) {
// })
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
сообщение / index.vue
<!--<div class="chat-tabs__item active">Входящие 0">{{ userMessage.count }}
-->
<!--<div class="chat-tabs__item">Системные-->
{{tab.title}}
<!-- <span>1 -->
{{ user.name[0] | uppercase }}{{ user.name[1] | uppercase }}
0" class="chat-item__new-messages">{{ user.unread }}
{{ user.name }}
<!--<div class="chat-item__last-messages" v-html="user.message">-->
<!--</div>-->
<!-- 13:25 -->
-->
<!-- <pre>
{{
chatMessage
}}
->
 .user_avatar_path)
{{userByIdMessage (message.sender_id) .name [0] | верхний регистр}} {{userByIdMessage (message.sender_id) .name [1] | прописные буквы}}
{{userCurrent.user_name [0] | верхний регистр}} {{userCurrent.user_name [1] | прописные буквы}}
{{message. created_at}}
{{chatUser.name}}
<! - <ul class = "interlocutor__info"> ->
<! - <li>->
<! - <span>->
<! - <img src="/img/marker-icon.svg" alt=""> ->
<! - </span> ->
<! - 115280, Москва, ->
<! - ул. Ленинская слобода, д. 19 ->
<! - </li> ->
<! - </ul> ->
<! - <p class = "interlocutor__text"> ->
<! - На сайте 5 мин., Выставленно ->
<! - 10 товаров. Время с момента регистрации 3 месяца .-->
<! - </p> ->
<! - <a href="#" class="btn btn--xl btn--border"> ->
<! - Перейти к заказу ->
<! - </a> ->
<! - <div class = "container" v-else> ->
<! - <div class = "row"> ->
<! - <div class = "col"> ->
<! - <h3> Сообщений нет ->
<! - </div> ->
<! - </div> ->
<! - </div> ->
const DOMAIN = process.env.API_DOMAIN
импортировать сокет из '@ / plugins / socket.io'
import {mapActions, mapGetters} из 'vuex'
импортировать api из '@ / api'
экспорт по умолчанию {
промежуточное ПО: «аутентифицировано»,
данные () {
вернуть {
chat_mob: ложь,
контакты: есть,
вкладки: {
входящий: {
активный: правда,
название: 'Входящие'
},
системный: {
активный: ложный,
название: 'Системные'
}
},
virtualUser: false,
baseUrl: ДОМЕН,
показать: ложь,
tabUsers: [],
chatUser: ноль,
сообщение: '',
userId: null,
тест: ноль,
img: '',
проверка: ложь
}
},
beforeMount () {
this.getUserMessage ()
if (socket) {
пусть база = это
socket.on (this.userCurrent.id + ': new-user-message', (message) => {
base.setSocketMessage ({
sender_id: message.message.from_id,
сообщение: message.message.message
})
base.setMessageCount ({
user_id: message.message.from_id
}
)
base.setUserUnreadMessage ({
count: this.userCurrent.unread_messages + 1
}
)
this.scrollToBottom ()
})
}
},
вычислено: {
... mapGetters ({
getContact: 'message / getContact',
idUserMessage: 'message / id',
userMessage: 'message / userMessage',
chatMessage: 'message / chatMessage',
userByIdMessage: 'message / userByIdMessage',
userCurrent: «пользователь / пользователь»
}),
activeTab () {
пусть index = null
if (this.idUserMessage! == null && this.userMessage! == [] && this.userMessage.users! == undefined) {
const user = this.userMessage.users.find (users => users.id === this.idUserMessage)
index = this.userMessage.users.indexOf (пользователь)
}
индекс возврата
}
},
методы: {
... mapActions ({
setUserUnreadMessage: 'user / setUserUnreadMessage',
setUsers: 'message / setUsers',
addUser: 'message / addUser',
setMessageCount: 'message / setMessageCount',
setUnread: 'message / setUnread',
getUserMessage: 'message / getUserMessage ', getChatMessage:' message / getChatMessage ', createMessage:' message / createMessage ', setStoreId:' message / setStoreId ', setSocketMessage:' message / setSocketMessage '}), checkMessage (id) {if (this.idUserMessage! =null && this.userMessage! == [] && this.userMessage.users! == undefined) {const user = this.userMessage.users.find (users => users.id === id) let index = this.userMessage.users.indexOf (пользователь) if (index === this.activeTab || id === this.userCurrent.id) вернуть true, иначе вернуть false}}, chatBack () {this.chat_mob = true this.contacts = trueconsole.log (123)}, changeTab (index) {console.log (index) для (пусть введите this.tabs) {this.tabs [ключ] .active = false} this.tabs [index] .active = true}, readMessage (id) {this.check = true const payload = {user_id: id} api.readMessage (payload) .then (() => {this.setUnread (payload)})}, chengeTab (index, id){if (window.innerWidth <768) {this.chat_mob = false} console.log (index, id) this.readMessage (id) для (пусть ключ в этом.userMessage.users) {this.tabUsers [key] = false} this.chatUser = this.userMessage.users [index] this.tabUsers [index] = true this.tabUsers.push () this.getChatMessage ({user_id: id}) this.setStoreId (id) this.userId = id this.scrollToBottom ()}, linkMessage (сообщение) {let reg = /(https?:\/\/(?:www\.|(?!www))[A-Za-Z0-9] [A-Za-Z0-9 -] + [A-Za-Z0-9] \ [^ \ s] {2} |.. WWW \ [A-Za-Z0-9] [A-Za-Z0-9 -] + [A-Za-Z0-9] \ [^ \ s] {2} | https:.?. \ / \ / (?: WWW \ | (?! WWW)) [A-Za-Z0-9] \ [^ \ s] {2} |... WWW \ [A-Za-Z0-9] \ [^ \ s] {2})/ let link = message.match (reg) let myMessage = message if (link) {myMessage = message.replace (link [0], ' ' + link [0] + '</a>')} вернуть myMessage}, асинхронноonSendMessage () {if (this.message! == '' && this.userId> 0 ||this.img! == '') {this.message = this.linkMessage (this.message) this.message = this.message + this.img const payload = {message: this.message, id: this.userId} console.log (payload) this.scrollToBottom () this.setSocketMessage ({sender_id: this.userCurrent.id, message: payload.message}) await this.createMessage (payload) this.message = '' this.img = ''}}, scrollToBottom () {this. $ nextTick (() => {let base = this setTimeout (() => {base. $ refs.chatBody.getElementsByClassName ('simplebar-scroll-content') [0] .scrollTop =document.getElementById ('message-container'). scrollHeight}, 500) // console.log (document.getElementById ('message-container'). scrollHeight)})}, uploadImg (e) {var file = e.target.files [0] const formData = new FormData () formData.append ('изображение', файл) api.loadImageChat (formData) .then (res => {//this.img = '
' + '
'this.img ='
'+' '})},}, смотрите: {userMessage: {handler (val) {if (! This.check) {this.tabUsers = [] if (val! == [] && this.userMessage) {if(this.activeTab! == null && this.idUserMessage! == null) {this.chengeTab (this.activeTab, this.idUserMessage)
} else if (this.userMessage.count! == undefined) {
this.chengeTab (0, this.userMessage.users [0] .id)
}
if (val.users! == undefined) {
this.virtualUser = true
если (this.getContact) {
if (! (val.users.find (user => user.id === this.getContact.id))) {
const payload = this.getContact
this.addUser (полезная нагрузка)
// this.userIndex = this.userMessage.users.length - 1
this.chengeTab (this.userMessage.users.length - 1, this.getContact.id)
}
еще {
let user = val.users.find (user => user.id === this.getContact.id)
this.userIndex = val.users.indexOf (пользователь)
this.chengeTab (this.userIndex, this.userMessage.users [this.userIndex] .id)
}
}
for (пусть введите val.users) {
let b = parseInt (key) === 0? правда: ложь
this.tabUsers.push (б)
}
if (! this.getContact ||! this.virtualUser) {
console.log (123)
this.chatUser = val.users [0]
}
еще {
this.virtualUser = false
}
}
}
}
},
глубокий: правда
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>